 <template>
  <div>
    <div style="margin-left: 0px">
      <el-date-picker
        v-model="yearMonth"
        type="month"
        @change="changeMonth"
        placeholder="选择月"
      >
      </el-date-picker>
    </div>
    <div id="myChart" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      xdata: [],
      yBookedData: [],
      yReservedData: [],
      yearMonth: "",
    };
  },
  created() {
    var date = new Date();
    this.yearMonth = date.getFullYear() + "-" + (date.getMonth() + 1);
    this.loadData();
  },
  methods: {
    loadData() {
      var _this = this;
      this.$http
        .get("/api/mbs/order/LoginLogShowByMonth?yearMonth=" + this.yearMonth)
        .then((response) => {
          console.log(JSON.stringify(response) + "...111..");
          _this.xdata = [];
          _this.yBookedData = [];
          _this.yReservedData = [];
          var showData = response.data.data;
          if(showData!=''&&showData!=null){
            //循环
            showData.forEach(e => {
                _this.xdata.push(e.monthDay);
                _this.yBookedData.push(e.booked);
                _this.yReservedData.push(e.reserved);
            });
            this.drawLine();
          }
        });
    },
    changeMonth(v) {
      //console.log(v);
      var year = v.getFullYear();
      var month = v.getMonth() + 1;
      //  console.log(year+"..444.."+month);
      this.yearMonth = year + "-" + month;
      this.loadData();
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "网站收入统计展示",
          subtext: "完全真实数据",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["总金额", "预付金额"],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xdata,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "总金额",
            type: "line",
            data: this.yBookedData,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "预付金额",
            type: "line",
            data: this.yReservedData,
            markPoint: {
              data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    symbol: "none",
                    x: "90%",
                    yAxis: "max",
                  },
                  {
                    symbol: "circle",
                    label: {
                      position: "start",
                      formatter: "最大值",
                    },
                    type: "max",
                    name: "最高点",
                  },
                ],
              ],
            },
          },
        ],
      });
    },
  },
};
</script>
<style>
.aaa {
  margin-left: 0px;
}
</style>